!function ($) {
    const reqHeader = $('.reqHeader');//引入header.html的div
    const reqFooter = $('.reqFooter');//引入footer.html的div
    const top = $('#goTop')//回到顶部
    const navLi = $('#asideFixed li')//楼梯
    const nav = $('#asideFixed')//楼梯
    const category = $('#category>div')//楼层
    const hotLis = $('.hot ul li') //热门商品分类
    const hotItems = $('.hot .fourItems .item') //热门商品分类
    const rankLis = $('.rank ul li') //热门商品分类
    const rankItems = $('.rank .rankItems .itemR') //热门商品分类
    const shorts = $('.shorts>ol');
    const popular = $('.popular>ol');
    const currents = $('.currents>ol');
    const swiperWrapper = $('#banner .swiper-wrapper');
    let indexUrl = 'http://10.31.162.37/underline/uniqloAPI/indexData.php';
    //首页渲染 -------------------start
   

    render(18, shorts);
    render(19, popular);
    render(20, currents);
    function render(pageNum, container) {
        $.ajax({
            url: indexUrl,
            data: { page: pageNum },
            dataType: 'json'
        }).done(data => {
            let str = '';
            data.forEach(function (value) {
                str += `<li>
                            <img class="lazy" data-original="${value.url}" alt="${value.title}">
                            <p>${value.title}</p>
                            <p>￥${value.price}起<span>初上市价￥199起</span></p>
                            <p>优惠期间5/29-6/4</p></li>
                        `;
            

            })
            container.html(str);
            //添加懒加载
            $(function () {
                $("img.lazy").lazyload({ effect: "fadeIn" });
            });
        })
    }
    //首页渲染 -------------------end
    //判断是否登录 -------------------start
    if (!localStorage.getItem('username')) {
        location.href = 'login.html';
        // return false
    }
    //判断是否登录 -------------------end
    //引入header/footer.html   -----------start
    reqHeader.load('../html/header.html');
    reqFooter.load('../html/footer.html');
    //引入header/footer.html   -------------end
    //添加懒加载-----------start
    $(function () {
        $("img.lazy").lazyload({ effect: "fadeIn" });
    });
    //添加懒加载-------------end
    //滚动事件 ----------------------------start
    if ($(window).scrollTop() >= 500) {
        top.show();
    }
    if ($(window).scrollTop() >= 1300) {
        nav.show();
    }
    navLi.on('click', function () {
        $(window).off('scroll');
        $(this).css({ color: 'red' }).siblings().css({ color: '#000' });
        let top = category.eq($(this).index()).offset().top - 100;
        $('html,body').animate({
            scrollTop: top
        }, function () {
            $(window).on('scroll', function () { //继续添加滚动事件。
                scroll();
            });
        });

    })
    top.on('click', function () {
        $('html,body').animate({
            scrollTop: 0
        });
    })
    scroll();
    function scroll() {
        $(window).on('scroll', () => {

            if ($(this).scrollTop() >= 500) {
                top.show();
            } else {
                top.hide();
            }
            if ($(this).scrollTop() >= 1300) {
                nav.show();
            } else {
                nav.hide();
            }
            category.each(function (index, element) {
                let top = $(this).offset().top - 100;
                if ($(window).scrollTop() > top) {

                    navLi.css({ color: '#000' });
                    navLi.eq(index).css({ color: 'red' });
                }
            });
        })
    };
    //滚动事件 ------------------------------end

    //tab切换 ------------------------------start
    tabswitch(hotLis, hotItems);
    tabswitch(rankLis, rankItems);
    /* tab事件 tabswitch(tab, item) 
        参数 
        tab, 按键
        item 显示区
    }  */
    function tabswitch(tab, item) {
        tab.on('click', function () {
            $(this).css({ borderBottom: '3px solid #378694' })
                .siblings().css({ borderBottom: '3px solid transparent' });
            item.eq($(this).index()).css({ zIndex: 10 })
                .siblings().css({ zIndex: -1 });
        })
    }
    //tab切换 ------------------------------------end
    //轮播 ---------------------------------------start
    let bannerSwiper = new Swiper('#banner', {//BANNER
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.banner-next',
            prevEl: '.banner-prev',
        },
    });
    swiperWrapper.hover(function () {
        bannerSwiper.autoplay.stop()
    },
        function () {
            bannerSwiper.autoplay.start();
        });

        let adSwiper = new Swiper('#ad', {//BANNER
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    //轮播 ---------------------------------------end
}(jQuery)